import React, { PureComponent, Fragment } from 'react';
import {InputNumber} from 'antd';
import styles from './index.less'

export default class InputNumberRange extends PureComponent {

    static getDerivedStateFromProps(nextProps) {
        // Should be a controlled component. 
        console.log(nextProps,'333')              
        if ('value' in nextProps) {         
          return {
            ...(nextProps), 
            aa:9999           
          };
        }
        return null;
      }
  
    constructor(props) {
        super(props); 
        console.log(props,9999999)                                    
        this.state = {         
          range:props.value||[]
        };
    }       
  onChange = (type,val) => {
    const { onChange } = this.props; 
    const { range } = this.state;
    // if(!range.length||range[0]&&range[1]||range[0]&&!range[1]||!range[0]&&range[1]){
      
    // }   
    if(type===0&&(range[0] >= range[1])){
      return;
    }
    range[type]=val;     
    this.setState({
        range
    })
    this.props.onChange(range) 
  } 

  onBlur= (e) => {
    const {onBlur} = this.props;
    if(typeof onBlur === 'function') onBlur(e);
  }

  render() {
    const {  
      value   
    } = this.props;  
     console.log(this.props)
    //const { range  } = this.state;    
    return (
        <div className={styles["InputNumberRange-container"]}>         
            <InputNumber  
              onChange={(val)=>this.onChange(0,val)} 
              value={value?value[0]:undefined}   
              className={styles.input} 
              formatter={value => `${value}`.replace(/(\.)|(\D)/g, '')}
              parser={value => value.replace(/(\.)|(\D)/g, '')}
            />
            <span className={styles.divider}>-</span>          
            <InputNumber  
              onChange={(val)=>this.onChange(1,val)} 
              value={value?value[1]:undefined}  
              className={styles.input}
              formatter={value => `${value}`.replace(/(\.)|(\D)/g, '')}
              parser={value => value.replace(/(\.)|(\D)/g, '')}
            />  
        </div>
    );
  }
}
